<template>
  <div class="episode-panel-container" v-if="selectedDrama">
    <div class="panel-header">
      <div class="header-content">
        <span class="header-title">剧集列表</span>
        <div class="header-right">
          <span v-if="selectedDrama" class="selected-drama-info">
            {{ selectedDrama.title }}
          </span>
        </div>
      </div>
    </div>
    
    <div v-loading="loadingEpisodes" element-loading-text="加载剧集..." class="episode-content">
      <div v-if="sortedEpisodes.length > 0" class="episode-table-section">
        <p class="section-title">选择剧集 (可多选或单选):</p>
        <div class="table-container">
          <el-table
            ref="episodeTableRef"
            :data="sortedEpisodes"
            highlight-current-row
            @current-change="handleSingleSelection"
            @selection-change="handleMultiSelectionChange"
            style="width: 100%"
            height="100%"
            row-key="episodeId"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            border
          >
            <el-table-column type="selection" width="55" :selectable="isEpisodeSelectable" align="center"></el-table-column>
            <el-table-column prop="episodeId" label="剧集ID" width="100" align="center"></el-table-column>
            <el-table-column prop="videoUrl" label="视频链接" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="状态" width="80" align="center">
              <template #default="{ row }">
                <el-tag :type="row.status === 0 ? 'success' : 'info'" size="small">
                  {{ row.status === 0 ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-empty v-else-if="!loadingEpisodes && episodes.length === 0" description="该剧暂无剧集" image-size="100">
        <template #description>
          <span style="color: #64748b; font-size: 15px; font-weight: 500;">该影视剧暂无可用剧集</span>
        </template>
      </el-empty>
    </div>
  </div>
  
  <div v-else class="empty-panel-container">
    <el-empty description="请选择影视剧" image-size="120">
      <template #description>
        <span style="color: #64748b; font-size: 16px; font-weight: 500;">请先从左侧选择一部影视剧查看剧集</span>
      </template>
    </el-empty>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ElTable } from 'element-plus'
import type { Drama, Episode } from '../../api/drama'

interface Props {
  selectedDrama: Drama | null
  episodes: Episode[]
  loadingEpisodes: boolean
}

interface Emits {
  (e: 'episode-selected', episode: Episode | null): void
  (e: 'episodes-selected', episodes: Episode[]): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const episodeTableRef = ref<InstanceType<typeof ElTable> | null>(null)

const sortedEpisodes = computed(() => {
  // 每次都重新排序，不使用缓存
  const sorted = [...props.episodes].sort((a, b) => {
    const idA = Number(a.episodeId)
    const idB = Number(b.episodeId)
    if (isNaN(idA) || isNaN(idB)) {
      return String(a.episodeId).localeCompare(String(b.episodeId))
    }
    return idA - idB
  })
  
  return sorted
})

const isEpisodeSelectable = (row: Episode) => {
  return row.status === 0
}

const handleSingleSelection = (episode: Episode | null) => {
  emit('episode-selected', episode)
  if (episode) {
    episodeTableRef.value?.clearSelection()
    episodeTableRef.value?.setCurrentRow(episode)
  }
}

const handleMultiSelectionChange = (selection: Episode[]) => {
  emit('episodes-selected', selection)
  if (selection.length > 0) {
    episodeTableRef.value?.setCurrentRow(null)
  }
}
</script>

<style scoped>
/* 这个组件的样式现在主要由主组件统一管理 */
/* 这里只需要添加组件特定的样式 */

.episode-panel-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
  flex-shrink: 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selected-drama-info {
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 12px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.episode-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.episode-table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}

.table-container {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
  flex-shrink: 0;
}

/* 剧集表格样式 - 简洁 */
:deep(.el-table) {
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table__row) {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

:deep(.el-table__row:hover) {
  background-color: #f9fafb;
}

:deep(.el-table__row.current-row) {
  background-color: #eff6ff;
}

/* 表格滚动条 - 简洁 */
:deep(.el-table__body-wrapper)::-webkit-scrollbar {
  width: 6px;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.empty-panel-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fafbfc;
  align-items: center;
  justify-content: center;
}
</style>